<template>
  <el-breadcrumb class="breadcrumb-container" separator=">">
    <el-breadcrumb-item v-for="item in list" :key="item.path">
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumb',
};
</script>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
let list = computed(() => {
  const { matched } = router.currentRoute.value;
  return matched.filter((item) => item.name && item.meta.title);
});
</script>

<style lang="scss" scoped>
.breadcrumb-container {
  display: flex;
  align-items: center;

  :deep(.el-breadcrumb__inner, .el-breadcrumb__item) {
    display: inline-flex;
    align-items: center;
    margin: 1px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  :deep(.el-breadcrumb__separator) {
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a):hover {
    font-weight: bold !important;
    color: #333 !important;
  }
}
</style>
